<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-05-11 20:28:07
 * @LastEditTime : 2023-07-19 10:01:37
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/userInfo/procure/index.vue
 * @Description  : -采购首页
-->
<template>
  <div class="dashboard-editor-container">

    <procure-group />

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <p>近一个月订单量</p>
          <order-chart ref="orderChart" :chartData="chartData" />
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper margin0">
          <p>近一个月商品销售排行（销售金额累计TOP50）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="tableData" 
              border
              style="width: 100%"
              v-loading="loading"
            >
              <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="productName" label="商品名称"></el-table-column>
              <el-table-column prop="orderNumber" label="订单数" />
              <el-table-column prop="saleNumber" label="销售金额" />
              <el-table-column prop="profitAmount" label="利润" />
              <el-table-column prop="profitRate" label="利润率" />
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getProcureSaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <notice />
  </div>
</template>

<script>
import ProcureGroup from '../../dashboard/ProcureGroup'
import OrderChart from '../../dashboard/OrderChart'
import Notice from '../../dashboard/Notice'
import {
  ProcureLastMonthOrderData,
  ProcureSaleRankingMonthData
} from "@/api/index/index"

export default {
  name: 'procurePage',
  components: {
    ProcureGroup,
    OrderChart,
    Notice
  },
  data() {
    return {
      tableData: [],
      chartData: {},
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      loading: true
    }
  },
  created() {
    this.getProcureLastMonthOrderData();
    this.getProcureSaleRankingMonthData();
  },
  methods: {
    // 近一个月订单量
    getProcureLastMonthOrderData() {
      ProcureLastMonthOrderData().then(res => {
        this.chartData = res.data;
        this.$nextTick(() => {
          this.$refs.orderChart.initChart();
        })
      })
    },
    // 近一个月商品销售排行（销售金额累计TOP50）
    getProcureSaleRankingMonthData() {
      this.loading = true;
      ProcureSaleRankingMonthData(this.queryParams).then(res => {
        this.tableData = res.records;
        this.total = res.total;
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 20px 16px 0;
    margin-bottom: 32px;

    .chart-wrapper-box {
      padding-bottom: 20px;
    }

    p {
      font-size: 16px;
      line-height: 18px;
      margin: 0 0 15px;
      color: #666;
    }
  }

  .margin0 {
    margin: 0;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>